<template>
  <div class="common-layout">
    <!---侧边栏--->
    <el-container>
      <ClubClMenu />
      <!---上边栏--->
      <el-container >
        <el-header class="header">
          <span class="text-large font-600 mr-3"><h2>退出审核 </h2></span>
        </el-header>
        <!---主界面--->
        <el-main>
          <!---搜索框--->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="学院">
              <el-select
                  v-model="formInline.college"
                  placeholder=""
                  clearable
              >
                <el-option
                    v-for="item in formInline.department"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="审核状态">
              <el-select
                  v-model="formInline.state"
                  placeholder="未审核"
                  clearable
              >
                <el-option label="未审核" value="未审核" />
                <el-option label="已审核" value="已审核" />
              </el-select>
            </el-form-item>
            <el-form-item >
              <el-input v-model="formInline.name" placeholder="成员名称" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">Query</el-button>
            </el-form-item>
          </el-form>
          <!---审核数据--->
          <el-table :data="filteredTableData" style="width: 100%">
            <el-table-column prop="user.name" label="姓名" width="180" />
            <el-table-column prop="user.department" label="学院" width="180" />
            <el-table-column prop="user.phone" label="联系电话" width="180" />
            <el-table-column prop="user.politicalAffiliation" label="政治面貌" width="180" />
            <el-table-column prop="joinTime" label="申请时间" width="180" />
            <!-- <el-table-column prop="right" label="申请理由" min-width="150">
              <template #default="scope">
                <el-button @click="viewDetails(scope.row.context)">
                  查看详情
                </el-button>
              </template>
            </el-table-column> -->

            <el-table-column prop="status" label="审核状态" width="120" >
              <template v-slot="scope">{{states[scope.row.status].value}}</template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="120">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="handleClick(scope.row)"  v-if="scope.row.status=='1'">
                  同意
                </el-button>
                <el-button link type="primary" size="small" @click="rejectClick(scope.row)" v-if="scope.row.status=='1'">拒绝</el-button>
                <el-button link type="primary" size="small" v-if="scope.row.status==='已审核'&&scope.row.flag==='0'">已同意</el-button>
                <el-button link type="primary" size="small" v-if="scope.row.status==='已审核'&&scope.row.flag==='1'">已拒绝</el-button>
                <el-button link type="primary" size="small" @click="recoverClick(scope.row)" v-if="scope.row.status==='已审核'&&(scope.row.flag==='0'||scope.row.flag==='1')">还原</el-button>
                <el-button link type="primary" size="small" @click="reAgreeClick(scope.row)" v-if="scope.row.status==='已审核'&&scope.row.flag==='0'">永久同意</el-button>
                <el-button link type="primary" size="small" @click="reForeverClick(scope.row)" v-if="scope.row.status==='已审核'&&scope.row.flag==='1'">永久拒绝</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!---分页--->
          <div class="changePage">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="pages.currentPage"
                :page-size="pages.pageSize"
                layout="prev, pager, next, jumper"
                :total="pages.total"
            />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import {computed, reactive, toRefs,watch,ref} from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import request from '@/request/request'
import {ElMessage} from "element-plus";
import {useWebStore} from '@/stores/web';
import ClubClMenu from "./ClubControlMenu.vue"
import axios from 'axios';


const webStore = useWebStore()
const userName=ref('')
const userAvatarUrl=ref('')
async function getUserInfo() {
  try{
    const response=await axios.get('http://localhost:8080/user/getInfo/'+webStore.web.uid)
    console.log('管理员信息：',response)
    userAvatarUrl.value=response.data.data.avatarUrl
    userName.value=response.data.data.name
    console.log('头像与名字：',userAvatarUrl,userName)
  }catch(error){
    console.log(error)
  }
}

getUserInfo()

const state = reactive({
  circleUrl:
      'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  sizeList: ['small', '', 'large'] as const,
})

const { circleUrl} = toRefs(state)
const formInline = reactive({
  clubName:'',
  college: '',
  category: '',
  state:'',
  name:'',
  tableData:[],
  department:[]
})

const onSubmit = () => {
  console.log('submit!')
}
const pages = reactive({
  currentPage: 1, // 当前页码
  pageSize: 10, // 每页显示的条目数
  total: 100, // 总条目数
});

// 监听页码变化
watch(() => pages.currentPage, (newPage) => {
  // 这里可以请求数据或使用计算属性更新数据
  // 例如: fetchData(newPage);
});

// 分页变化事件处理
const handleCurrentChange = (newPage) => {
  pages.currentPage = newPage;
  load();
};

const load =()=>{
  request.get(`/quit/users/${webStore.web.clubId}`,{
    params:{
      pageNo:pages.currentPage,
      pageSize:pages.pageSize
    }
  }).then(res=>{
    formInline.tableData=res.data.data.records
    console.log(formInline.tableData)
  })
  request.get('/department/getAll').then(res=>{
    console.log(res)
    formInline.department=res.data.data
  })
}
load();
// 使用计算属性根据筛选条件过滤数据
const filteredTableData = computed(() => {
  return formInline.tableData.filter(item => {
    // 如果输入社团名称，也进行名称筛选
    if (formInline.name && !item.name.includes(formInline.name)) {
      return false;
    }
    // 如果选择了学院，只显示该学院的社团
    if (formInline.college && item.college !== formInline.college) {
      return false;
    }
    //审核状态
    if (formInline.state && item.state !== formInline.state) {
      return false;
    }
    return true;
  });
});
const states=[
  {
    status: 0,
    value:'未审核'
  },
  {
    status: 1,
    value:'未审核'
  },
  {
    status: 2,
    value: '已审核'
  }
]

//审核同意
const handleClick = (row) => {
  //通过 row 来获取当前行数据
  request.put('/join/audit',{},{
    params:{
      clubId:webStore.web.clubId,
      userId:row.userId,
      status:3
    }
  }).then(res=>{
    if(res.data.code=='200'){
      load();
      ElMessage.success('同意退出')
    }else ElMessage.error(res.data.msg)
  })

};
//审核拒绝
const rejectClick = (row) => {
  //通过 row 来获取当前行数据
  request.put('/join/audit',{},{
    params:{
      clubId:webStore.web.clubId,
      userId:row.userId,
      status:1
    }
  }).then(res=>{
    if(res.data.code=='200'){
      load();
      ElMessage.success('拒绝退出')
    }else ElMessage.error(res.data.msg)
  })
};
//永久同意
const reAgreeClick = (row) => {
  row.flag='';
}
//永久拒绝
const reForeverClick = (row) => {
  row.flag='';
}
//未审核
const recoverClick = (row) => {
  //通过 row 来获取当前行数据
  if (row.state === '已审核') {
    // 将当前行的审核状态改为 '已审核'
    row.state = '未审核';
    row.flag='';
    console.log('状态更新为已审核：', row);
  }
  // 可以添加更多的逻辑来处理其他状态的变更
};


const viewDetails = (url) => {
  window.open(url, '_blank');
};
</script>

<style scoped>
.demo-basic {
  text-align: center;
}
.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 18px;
  color: var(--el-text-color-secondary);
}
.demo-basic .demo-basic--circle{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 20px;
}
.demo-basic .block {
  flex: 1;
}
.aside{
  width:200px;
  height:750px;
  background-color: #f6f1ea;
}
.menu-list{
  margin-left: 15px;
}
.header{
  background: rgba(90, 122, 154, 0.15);
  height:80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.demo-form-inline .el-input {
  --el-input-width:120px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.changePage{
  margin-top: 50px;
  position: absolute;
  right: 50px;
}
.common-layout{
  background: rgba(153, 217, 202, 0.08);
}
</style>